<template>
  <div class="com-container">
    <el-card class="mb30">
      <span>时间范围</span>
      <el-date-picker
        v-model="timevalue"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="margin-left: 15px"
      >
      </el-date-picker>
      <el-button class="ml15" type="primary" @click="find" :disabled="dis"
        >查询</el-button
      >
    </el-card>
    <el-card>
      <div id="myChart"></div>
    </el-card>
  </div>
</template>

<script>
import { ordertotal } from "@/apis/echarts";
import { getYMDHSM } from "@/utils/utils";
export default {
  data() {
    return {
      timevalue: "",
      dis: false,
    };
  },

  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = this.$echarts.init(document.getElementById("myChart"));
  },
  methods: {
    find() {
      this.dis = true;
      setTimeout(() => {
        this.dis = false;
      }, 1000);
      ordertotal({ date: JSON.stringify(this.timevalue) }).then((res) => {
        console.log(res);
        let xData = res.data.data.map((obj) => getYMDHSM(obj.orderTime));
        let yData = res.data.data.map((obj) => obj.orderAmount);
        let myChart = this.$echarts.init(document.getElementById("myChart"));
        // 绘制图表
        myChart.setOption({
          title: {
            text: "订单统计",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                colors: ["#5470C6", "#91CC75"],
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["金额柱状图", "金额折线图"],
          },
          xAxis: [
            {
              type: "category",
              data: xData,
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "订单金额",
              min: 0,
              max: 160,
              interval: 20,
              axisLabel: {
                formatter: "￥{value}",
              },
            },
            {
              type: "value",
              name: "订单金额",
              min: 0,
              max: 160,
              interval: 20,
              axisLabel: {
                formatter: "￥{value}",
              },
            },
          ],
          series: [
            {
              name: "金额柱状图",
              type: "bar",
              data: yData,
              color: " #5470C6",
            },
            {
              name: "金额折线图",
              type: "line",
              yAxisIndex: 1,
              data: yData,
              color: "#91CC75",
            },
          ],
        });
      });
    },
  },

  created() {
    let timenum = new Date() - 1000 * 60 * 60 * 24 * 365 * 3;
    this.timevalue = [getYMDHSM(new Date(timenum)), getYMDHSM(new Date())];
  },
};
</script>

<style lang="less" scoped>
#myChart {
  width: 100%;
  height: 500px;
}
</style>